<template>
    <van-nav-bar title="购物车页" left-text="返回" left-arrow @click-left="() => { $router.back() }" />
    <div v-for="item in cartdata">
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                <template #thumb>
                    <div style="display: flex;">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <img :src="item.goods.goods_big_logo ? item.goods.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            alt="" style="width: 70px;
                        height: 70px;">
                    </div>
                </template>
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" @click="delcart(item.id)" class="delete-button" />
            </template>
        </van-swipe-cell>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
console.log(store.carts)
let cartdata = ref([])
let cartxuan = () => {
    cartdata.value = store.carts
}
cartxuan()

let delcart=(id)=>{
    console.log('您删除的id',id)
    store.carts=store.carts.filter(item=>item.id!=id)
    cartxuan()
}
</script>

<style lang="scss" scoped></style>